<template>
    <div>
        <p>普通使用v-mode</p>
        <p>{{mess}}</p>
        <!-- <input type="text" v-model="mess"> -->
        <input type="text" :value="mess" @input="handleInput" style="width: 300px">

        <p>vue 高级特性</p>
        <p>{{name}}</p>
        <CustomVModel v-model="name" />

        <NextTick />

        <SlotDemo :url="website.url">
            {{website.title}}
        </SlotDemo>

        <br />
        <ScopedSlotDemo :url="website.url">
            <template v-slot="slotProps">
                {{slotProps.slotData.title}}
            </template>
        </ScopedSlotDemo>
        <br />
        <FormDemo v-if="showFormDemo" />
        <button @click="showFormDemo = true">show form demo</button>

        <br />
        <KeepAlive />

    </div>
</template>

<script>
import CustomVModel from './CustomVModel.vue'
import NextTick from './NextTick.vue'
import SlotDemo from './SlotDemo.vue'
import ScopedSlotDemo from './ScopedSlotDemo.vue'
import KeepAlive from './KeepAlive.vue'
/**
 * v-model
 * 原理：
 * 是一个语法糖，本质是：v-model= v-bind（:value属性）+ v-on(@input事件)
 */
export default {
    components: {
        CustomVModel,
        NextTick,
        SlotDemo,
        ScopedSlotDemo,
        // 组件异步加载
        FormDemo: () => import('./FormDemo.vue'),
        KeepAlive
    },
    data() {
        return {
            name: '双月',
            mess: '测试v-mode双向绑定',
            website: {
                url: 'http://imooc.com/',
                title: 'imooc',
                subTitle: '程序员的梦工厂'
            },
            showFormDemo: false
        }
    },
    methods: {
        handleInput(e) {
            // eslint-disable-next-line no-console
            console.log('hello world');
            // eslint-disable-next-line no-console
            console.log(e.target.value);
            this.mess = e.target.value
        }
    }

}
</script>

<style>

</style>